<template>

	<div>
		<div style="background: #fff;padding:21px 27px;border-radius: 8px;">
			<div class="displayFlexBet">
				<div class="displayFlex">
					<el-select size="small" style="width:140px" class="input-width mr30" clearable
						v-model="getParams.busiStatus" placeholder="使用状态" @change="search()">
						<el-option label="使用中" value="IN_USE"> </el-option>
						<el-option label="已停用" value="NOT_USE"> </el-option>
					</el-select>

					<el-select v-model="getParams.emissionStandard" placeholder="排放标准" clearable @change="search()">
						<el-option label="无排放阶段" value="NO_STANDARD" />
						<el-option label="国0" value="NATIONAL_STANDARD_0" />
						<el-option label="国一" value="NATIONAL_STANDARD_1" />
						<el-option label="国二" value="NATIONAL_STANDARD_2" />
						<el-option label="国三" value="NATIONAL_STANDARD_3" />
						<el-option label="国四" value="NATIONAL_STANDARD_4" />
						<el-option label="国五" value="NATIONAL_STANDARD_5" />
						<el-option label="国六" value="NATIONAL_STANDARD_6" />
						<el-option label="氢能" value="HYDROGEN" />
						<el-option label="新能源" value="NEW_ENERGY" />
						<el-option label="电动" value="ELECTRIC" />
					</el-select>
				</div>

				<div @click="visible1 = true,form=$options.data().form" class="displayFlex point">
					<el-button icon="el-icon-plus" type="primary" size="mini">新增车辆</el-button>
				</div>
			</div>
		</div>

		<div style="margin-top: 10px;">
			<div class="displayFlexBet bgfff bra8 font15 color555" style="padding: 10px 20px 10px 32px;">
				<div style="width: 40px;">编号</div>
				<div style="width: 150px;">车牌号码</div>
				<div style="width: 250px;">环保登记编号</div>
				<div style="width: 150px;">生产日期</div>
				<div style="width: 250px;">燃料类型</div>
				<div style="width: 200px;">排放标准</div>
				<div style="width: 150px;">状态</div>
				<div style="width: 150px;">操作</div>
			</div>

			<div class="bgfff bra8 font15 color555 mt10" style="padding: 10px 20px 10px 32px;">
				<el-empty v-if="tableData.list.length == 0" style="margin: 0 auto;" />
				<div v-for="(item,index) in tableData.list" :key="index" class="displayFlexBet color555 point"
					style="border-bottom: 1px solid#F8F7F9;padding-bottom: 20px;padding-top: 20px;"
					@click="$router.push('/cleanTransportation/vehicleInfo?id='+item.id)">
					<div style="width: 40px">{{index+1}}</div>
					<div style="width: 150px;">{{item.vehicleNo}}</div>
					<div style="width: 250px;">{{item.receiptNo}}</div>
					<div style="width: 150px;">{{item.produceDate}}</div>
					<div style="width: 250px;">{{item.fuelTypeStr}}</div>
					<div style="width: 200px;">{{item.carStdStr}}</div>
					<div style="width: 150px;">
						<div v-if="item.busiStatus == 'IN_USE'" class="displayFlexBet pad10"
							style="width: 80px;height: 28px;background: #E6F7E9;border-radius: 14px">
							<div style="width: 13px;height: 13px;background: #4CD964;border-radius: 50%;"></div>
							<div class="color000" style="font-weight:500">使用中</div>
						</div>
						<div v-else class="displayFlexBet pad10"
							style="width: 80px;height: 28px;background: #FAE6E6;border-radius: 14px">
							<div style="width: 13px;height: 13px;background: #EF5350;border-radius: 50%;"></div>
							<div class="color000" style="font-weight:500">停用</div>
						</div>
					</div>
					<div style="width: 150px;">
						<img src="@/assets/sIcon68.png" style="cursor: pointer;width: 15px;height: 18px;"
							@click.stop="edit(item)" />
					</div>
				</div>
			</div>
			<div style="width: 100%;line-height: 56px;background: #E8EAEF;border-radius: 8px;"
				class="textCenter font15 color555 mt10">
				<span style="margin-right: 80px;">合计：{{data1.total}}辆</span>
				<span v-for="(item,index) in data1.list" :key="index"
					style="margin-right: 80px;">{{item.name}}：{{item.num}}辆</span>
			</div>
			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>

		<el-dialog :visible.sync="visible1" title="编辑车辆" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="formRules" label-width="130px">

				<el-form-item label="所属人（单位）" prop="carrier">
					<el-input v-model="form.carrier" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="环保登记编码" prop="receiptNo">
					<el-input v-model="form.receiptNo" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="生产日期" prop="produceDate">
					<el-date-picker v-model="form.produceDate" type="date" placeholder="生产日期" value-format="yyyy-MM-DD"
						class="width100p">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="车牌号码" prop="vehicleNo">
					<el-input v-model="form.vehicleNo" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="排放标准" prop="carStd">
					<el-select v-model="form.carStd" placeholder="请选择" class="width100p">
						<el-option label="无排放阶段" value="NO_STANDARD" />
						<el-option label="国0" value="NATIONAL_STANDARD_0" />
						<el-option label="国一" value="NATIONAL_STANDARD_1" />
						<el-option label="国二" value="NATIONAL_STANDARD_2" />
						<el-option label="国三" value="NATIONAL_STANDARD_3" />
						<el-option label="国四" value="NATIONAL_STANDARD_4" />
						<el-option label="国五" value="NATIONAL_STANDARD_5" />
						<el-option label="国六" value="NATIONAL_STANDARD_6" />
						<el-option label="氢能" value="HYDROGEN" />
						<el-option label="新能源" value="NEW_ENERGY" />
						<el-option label="电动" value="ELECTRIC" />
					</el-select>
				</el-form-item>

				<el-form-item label="燃料类型" prop="fuelType">
					<el-select v-model="form.fuelType" placeholder="请选择" class="width100p">
						<el-option v-for="(item,index) in unitList1" :key="index" :label="item.value" :value="item.code" />
					</el-select>
				</el-form-item>


				<el-form-item label="车辆型号" prop="carModel">
					<el-input v-model="form.carModel" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="车辆识别编号" prop="carVin">
					<el-input v-model="form.carVin" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="发动机型号" prop="engineModel">
					<el-input v-model="form.engineModel" class="width100p"></el-input>
				</el-form-item>
				<el-form-item label="发动机生产厂" prop="engineEnt">
					<el-input v-model="form.engineEnt" class="width100p"></el-input>
				</el-form-item>
				<el-form-item label="发动机编号" prop="engineNo">
					<el-input v-model="form.engineNo" class="width100p"></el-input>
				</el-form-item>

				<el-form-item label="随车清单" prop="listImgId">
					<div>
						<el-upload accept=".pdf" :limit="1" :multiple="false" :file-list="form.listImgList" action="#"
							:auto-upload="false" :on-change="changelistImg" :on-remove="removelistImg">
							<div class="displayFlex">
								<img src="@/assets/sIcon182.png" style="width: 20px;height: 20px;" />
								<el-button type="text" class="ml5">随车清单</el-button>
							</div>
						</el-upload>
					</div>
				</el-form-item>

				<el-form-item label="行驶证" prop="drivingLicenseImgId">
					<div>
						<el-upload accept=".pdf" :limit="1" :multiple="false" :file-list="form.drivingLicenseImgList"
							action="#" :auto-upload="false" :on-change="changedrivingLicenseImg"
							:on-remove="removedrivingLicenseImg">
							<div class="displayFlex">
								<img src="@/assets/sIcon183.png" style="width: 20px;height: 20px;" />
								<el-button type="text" class="ml5">行驶证</el-button>
							</div>
						</el-upload>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveOrUpdate">保存</el-button>
				<el-button @click="cancle">取消</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import moment from 'moment'
	import $ from 'jquery'
	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let VIEW_ACTION = '/view';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';
	import {
		Session
	} from '@/utils/storage';
	import * as echarts from 'echarts';

	export default {
		name: "inCar",
		components: {},
		data() {
			return {
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				visible1: false,
				contentHeight: window.innerHeight,
				unitList1: [],
				unitList2: [],
				data1: [],
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
				form: {
					id: '', // 药剂id
					carrier: '', // 所属人（单位）
					receiptNo: '', // 环保登记编码
					produceDate: '', // 生产日期
					vehicleNo: '', // 车牌号码
					carStd: '', // 排放标准
					fuelType: '', // 燃料类型
					machineryCategory: '', // 机械种类
					carPin: '', // 机械环保代码
					carModel: '', // 车辆型号
					carVin: '', // 车辆识别代码
					machineryModel: '', // 机械型号
					engineModel: '', // 发动机型号
					engineEnt: '', // 发动机生产厂
					engineNo: '', // 发动机编号
					listImg: '', // 整车铭牌
					listImgList: [],
					listImgId: '',
					drivingLicenseImg: '', // 发动机铭牌
					drivingLicenseImgList: [],
					drivingLicenseImgId: '',
					machineryLabel: '', // 机械环保标签
					machineryLabelList: [],
					machineryLabelId: ''
				},
				formRules: {
					vehicleNo: [{
						required: true,
						message: '车牌号',
						trigger: 'blur',
					}],
					carrier: [{
						required: true,
						message: '所属人（单位）',
						trigger: 'blur'
					}]
				},
				getParams: {
					busiStatus: '',
					emissionStandard: '',
					pageSize: 20,
					pageIndex: 1,
					carCategory: 'INSIDE_CAR'
				}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getParams.ticketId = that.$store.state.token

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'FUEL_TYPE'
				},
				success: function(data) {
					if (data.status == 1) {
						that.unitList1 = data.data;
					}
				}
			});

			that.ajax({
				url: '/codeType/listCodeValue',
				data: {
					typeCode: 'MACHINERY_CATEGORY'
				},
				success: function(data) {
					if (data.status == 1) {
						that.unitList2 = data.data;
					}
				}
			});

			that.ajax({
				url: '/cleanTransportation/countCarEmissionStandard',
				data: JSON.stringify({
					carCategory: 'INSIDE_CAR'
				}),
				contentType: 'application/json',
				success: function(data) {
					if (data.status == 1) {
						that.data1 = data.data
					}
				}
			});

			that.pageMobileMachinery()
		},

		methods: {
			search() {
				that.tableData.pageIndex = 1
				that.pageMobileMachinery()
			},

			edit(item) {
				that.visible1 = true
				that.form = item
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.pageMobileMachinery();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.pageMobileMachinery();
			},

			downLoadFile(fileId) {
				window.open(that.fileViewUrl + fileId)
			},


			changemachineryLabel: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);
				// if (file.raw.type.indexOf("pdf") == -1) {
				// 	return this.$message({
				// 		message: '请上传pdf文件',
				// 		type: 'warning'
				// 	});
				// }
				_this.form.machineryLabelList = fileList
				_this.form.machineryLabel = file;
			},

			removemachineryLabel() {
				this.form.machineryLabelList = []
				this.form.machineryLabel = ''
			},

			changedrivingLicenseImg: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);
				// if (file.raw.type.indexOf("pdf") == -1) {
				// 	return this.$message({
				// 		message: '请上传pdf文件',
				// 		type: 'warning'
				// 	});
				// }
				_this.form.drivingLicenseImgList = fileList
				_this.form.drivingLicenseImg = file;
			},

			removedrivingLicenseImg() {
				this.form.drivingLicenseImgList = []
				this.form.drivingLicenseImg = ''
			},

			changelistImg: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);
				// if (file.raw.type.indexOf("pdf") == -1) {
				// 	return this.$message({
				// 		message: '请上传pdf文件',
				// 		type: 'warning'
				// 	});
				// }
				_this.form.listImgList = fileList
				_this.form.listImg = file;
			},

			removelistImg() {
				this.form.listImgList = []
				this.form.listImg = ''
			},

			pageMobileMachinery() {
				that.ajax({
					url: '/cleanTransportation/pageInCar?ticketId=' + that.getParams
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.getParams),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							for (let item of result.data.records) {
								if (item.produceDate) item.produceDate = item.produceDate.split(" ")[0]
								if (item.licenseDate) item.licenseDate = item.licenseDate.split(" ")[0]
							}
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

			chooseMaterial(item) {
				that.materialId = item.id
				that.materialName = item.materialName
				that.get()
				that.getPageUse()
				that.getChart()
			},

			cancle() {
				that.form = that.$options.data().form
				that.visible1 = false
			},

			saveOrUpdate() {
				that.$refs['form'].validate(function(valid) {
					if (valid) {
						that.$confirm('是否确定保存, 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							that.uploadFile(function(listImgId) {
								that.uploadFile(function(drivingLicenseImgId) {
									that.form.listImgId = listImgId
									that.form.drivingLicenseImgId = drivingLicenseImgId
									// that.form.machineryLabelId =
									// 	machineryLabelId
									that.ajax({
										url: '/cleanTransportation/saveInCar',
										data: JSON.stringify(that.form),
										contentType: 'application/json',
										success: function(result) {
											that.$message.success(
												"保存成功！")
											that.cancle()
											that.pageMobileMachinery()
										},
									})
								}, that.form.drivingLicenseImg)
							}, that.form.listImg)
						})
					}
				})
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},

			uploadFile: function(callback, fileItem) {
				var _this = this;

				if (fileItem && fileItem.raw) {
					var formdata = new FormData()
					formdata.append("file", fileItem.raw);
					formdata.append("appKey", APPKEY);
					formdata.append("businessCode", that.randomChar(19));
					formdata.append("prodID", PRODID);
					$.ajax({
						url: 'https://www.weifeibangbang.com/file/upload',
						data: formdata,
						type: 'POST',
						dataType: 'json',
						contentType: false,
						processData: false,
						success: function(result) {
							var fileId = result.data;
							callback(fileId);
						},
						error: function() {}
					})
				} else {
					callback('')
				}
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.width100p {
		width: 100%;
	}
</style>